<template>
    <view class="container">
        <view class="search-main">
            <view class="item">
                <view class="left">跟进状态</view>
                <view class="right">
                    <view class="tab">
                        <view class="tab-item" v-for="(item,index) in flowStepArr" :class="{active:flowIndex==index}"
                            @click="tabTap('flow',index)">{{item}}</view>
                    </view>
                </view>
            </view>

            <view class="item">
                <view class="left">意向度</view>
                <view class="right">
                    <view class="tab">
                        <view class="tab-item" v-for="(item,index) in purchaseStepArr" :class="{active:purchIndex==index}"
                            @click="tabTap('purch',index)">{{item}}</view>
                    </view>
                </view>
            </view>

            <view class="item">
                <view class="left">线索类型</view>
                <view class="right">
                    <view class="tab">
                        <view class="tab-item" v-for="(item,index) in clueTypeArr" :class="{active:clueIndex==index}"
                            @click="tabTap('clue',index)">{{item}}</view>
                    </view>
                </view>
            </view>


            <view class="cell-item arrow">
                <view class="left">品牌</view>
                <view class="right" @click="goToCarMake">
                    <view class="right-inner" :class="{isGray:brand=='请选择车辆品牌、型号'}">{{brand}}</view>
                </view>
            </view>


            <view class="cell-item arrow">
                <view class="left">保险到期时间</view>
                <view class="right">
                    <view class="right-inner">
                        <picker mode="date" :value="caleStartDate" start="2010-01-01" end="2029-01-01" @change="bindCaleStartDateChange">
                            <view :class="{isGray:caleStartDate=='请选择开始时间'}">{{caleStartDate}}</view>
                        </picker>
                    </view>
                </view>
            </view>
            <view class="cell-item arrow">
                <view class="left"></view>
                <view class="right">
                    <view class="right-inner">
                        <picker mode="date" :value="caleEndDate" start="2010-01-01" end="2029-01-01" @change="bindCaleEndDateChange">
                            <view :class="{isGray:caleEndDate=='请选择结束时间'}">{{caleEndDate}}</view>
                        </picker>
                    </view>
                </view>
            </view>


            <view class="search-button">
                <view class="button" @click="search">查询</view>
            </view>
        </view>


        <uni-calendar ref="calendarS" :startDate="caleS.startDate" :endDate="caleS.endDate" :insert="caleS.insert"
            :lunar="caleS.lunar" @confirm="caleSConfirm" />

        <uni-calendar ref="calendarE" :startDate="caleE.startDate" :endDate="caleE.endDate" :insert="caleE.insert"
            :lunar="caleE.lunar" @confirm="caleEConfirm" />


    </view>
</template>

<script>
    import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
    export default {
        components: {
            uniCalendar
        },
        data() {
            return {
                flowStepArr: ['全部', '待跟进', '跟进中', '成交', '战败'],
                flowIndex: 0,
                purchaseStepArr: ['全部', '低', '中', '高'],
                purchIndex: 0,
                clueTypeArr: ['全部', '出险客户', '续保客户'],
                clueIndex: 0,
                brand: '请选择车辆品牌、型号',
                caleStartDate: '请选择开始时间',
                caleEndDate: '请选择结束时间',
                caleS: {
                    startDate: '2000-01-01',
                    insert: false,
                    lunar: false,
                    endDate: '2100-12-31'
                },
                caleE: {
                    startDate: '2000-01-01',
                    insert: false,
                    lunar: false,
                    endDate: '2100-12-31'
                }
            }
        },
        onShow() {
            let self = this;
            let mainText = self.$store.state.carMake.mainText;
            let subText = self.$store.state.carMake.subText;
            console.log(self.$store.state.carMake)
            if (mainText && subText) {
                self.brand = self.$store.state.carMake.mainText + '  ' + self.$store.state.carMake.subText;
            } else if (self.$store.state.carMake.mainText) {
                self.brand = self.$store.state.carMake.mainText;
            } else {
                self.brand = '请选择车辆品牌、型号';
            }
        },
        methods: {
            //tab切换
            tabTap(type, index) {
                if (type == 'flow') {
                    this.flowIndex = index;
                } else if (type == 'purch') {
                    this.purchIndex = index;
                } else if (type == 'clue') {
                    this.clueIndex = index;
                }
            },
            //前往车型品牌页面
            goToCarMake() {
                uni.navigateTo({
                    url: '/pages/common/carMake'
                })
            },
            openCalendar(type) {
                let self = this;
                self.$refs[type].open();
            },
            bindCaleStartDateChange(e) {
                console.log('confirm 返回:', e);
                this.caleStartDate = e.target.value;
            },
            bindCaleEndDateChange(e) {
                console.log('confirm 返回:', e);
                this.caleEndDate = e.target.value;
            },
            search() {
                let self = this;
                if (self.purchIndex < 1) {
                    self.purchIndex = -1;
                }
                self.flowIndex--;
                // if (self.brand == '请选择车辆品牌、型号') {
                //     uni.showToast({
                //         title: '请选择车辆品牌、型号',
                //         icon: 'none'
                //     })
                //     return false;
                // }

                // if (self.caleStartDate == '请选择开始时间') {
                //     uni.showToast({
                //         title: '请选择开始时间',
                //         icon: 'none'
                //     })
                //     return false;
                // }
                // if (self.caleEndDate == '请选择结束时间') {
                //     uni.showToast({
                //         title: '请选择结束时间',
                //         icon: 'none'
                //     })
                //     return false;
                // }
                let start = 0,
                    end = 0;
                if (!self.caleStartDate.startsWith('请')) {
                    start = new Date(self.caleStartDate).getTime();
                } else {
                    self.caleStartDate = '';
                }
                if (!self.caleEndDate.startsWith('请')) {
                    end = new Date(self.caleEndDate).getTime();
                } else {
                    self.caleEndDate = '';
                }
                if (end > 0) {
                    if (start > end) {
                        uni.showToast({
                            title: '结束时间必须大于开始时间',
                            icon: 'none'
                        })
                        return false;
                    }
                }

                let info = {
                    flowStepStatus: self.flowIndex, //跟进状态  flowStepArr: ['待跟进', '跟进中', '成交', '战败']
                    purchaseStepStatus: self.purchIndex, //线索意愿   purchaseStepArr: ['全部', '低', '中', '高']
                    brandText: self.$store.state.carMake.mainText, //品牌名称
                    brandId: self.$store.state.carMake.mainId, //品牌id
                    modelText: self.$store.state.carMake.subText, //车型名称
                    modelId: self.$store.state.carMake.subId, //车型id
                    clueType: self.clueIndex, //线索类型
                    insureStartDate: self.caleStartDate, //保险到期开始时间
                    insureEndDate: self.caleEndDate, //保险到期结束时间
                    isSearch: true //是否查询
                };
                console.log(JSON.stringify(info))
                self.$store.dispatch('search/searchInfo', info).then(function() {
                    console.log('搜索设置成功');
                    // uni.showToast({
                    //     title: '马上进行查询，请稍等...',
                    //     icon: 'loading',
                    //     duration: 1500
                    // })
                    uni.navigateBack();
                })

            }
        }
    }
</script>

<style>
    page {
        background-color: #fff;
    }

    .tab {
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 14upx;
        border: 1px solid #3c67c2;
        overflow: hidden;
    }

    .tab .tab-item {
        box-sizing: border-box;
        flex: 1;
        font-size: 28upx;
        color: #3c67c2;
        text-align: center;
        line-height: 70upx;
        border-right: 1px solid #3c67c2;
    }

    .tab .tab-item:last-child {
        border-right: none;
    }

    .tab .tab-item.active {
        background-color: #3c67c2;
        color: #fff;
    }

    .search-main {
        padding: 20upx 30upx;
    }

    .item {
        display: flex;
        align-items: center;
        height: 70upx;
        line-height: 70upx;
        margin-bottom: 30upx;
    }

    .item .left {
        flex: 2.5;
        font-size: 28upx;
        color: #666;
    }

    .item .right {
        flex: 7.5;
    }

    .cell-item {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 30upx;
    }

    .cell-item .left {
        flex: 2.5;
        font-size: 28upx;
        color: #666;
    }

    .cell-item .right {
        position: relative;
        flex: 7.5;
        height: 70upx;
        line-height: 70upx;
        border-bottom: 1px solid #f1f1f1;
    }

    .cell-item .right .right-inner {
        font-size: 28upx;
        color: #666;
        width: 98%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cell-item.arrow .right:after {
        position: absolute;
        right: 0;
        top: 0;
        font-family: "iconfont" !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '\e70c';
        font-size: 32upx;
        color: #999;
        z-index: 3;
    }

    .search-button {
        box-sizing: border-box;
        width: 100%;
        padding: 90upx 0 30upx 0;
    }

    .search-button .button {
        box-sizing: border-box;
        width: 100%;
        height: 80upx;
        line-height: 80upx;
        font-size: 32upx;
        color: #fff;
        background-color: #3c67c2;
        border-radius: 14upx;
        text-align: center;
    }
</style>
